<template>
	<view>
		<view id="content_div" :style="{ height: modelHeight + 'px', 'overflow-y': 'auto'}">
			<curriculum v-if="type == 'curriculum'"></curriculum>
			<list ref="list" v-if="type == 'list'"></list>
			<personal v-if="type == 'personal'"></personal>
		</view>
		<view class="tabs">
			<!-- <view @click="setType('index')" :class="[type == 'index' ? 'active' : '']" class="item">
				<image class="default" src="@/static/tabBar/home.png" mode="widthFix" />
				<image class="yes" src="@/static/tabBar/home.png" mode="widthFix" />
				<view class="text">首页</view>
			</view> -->
			<view @click="setType('curriculum')" :class="[type == 'curriculum' ? 'active' : '']" class="item">
				<image class="default" src="@/static/tabBar/yue_select.png" mode="widthFix" />
				<image class="yes" src="@/static/tabBar/yue_select_active.png" mode="widthFix" />
				<view class="text">约课</view>
			</view>
			<view @click="setType('list')" :class="[type == 'list' ? 'active' : '']" class="item">
				<image class="default" src="@/static/tabBar/yue.png" mode="widthFix" />
				<image class="yes" src="@/static/tabBar/yue_active.png" mode="widthFix" />
				<view class="text">已约</view>
			</view>
			<view @click="setType('personal')" :class="[type == 'personal' ? 'active' : '']" class="item">
				<image class="default" src="@/static/tabBar/personal.png" mode="widthFix" />
				<image class="yes" src="@/static/tabBar/personal_active.png" mode="widthFix" />
				<view class="text">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
import curriculum from '@/pages/appointment/curriculum/curriculum';
import list from '@/pages/appointment/list/list';
import personal from '@/pages/my/my';
import $util from '../../utils/util.js'

export default {
	components: {
		curriculum,
		list,
		personal
	},

	data() {
		return {
			modelHeight: 0,
			type: 'curriculum'
		};
	},
	
	onShow() {
		console.group('index.vue onShow 状态===============》');	
	    this.setType("curriculum");
	},
	
	mounted() {
		let userId = uni.getStorageSync('userId');
		if(!userId){
			uni.redirectTo({
				url: '/pages/my/login/login?bid=' + this.$util.getUrlCode("bid")
			}) 
			return;
		}
		
		this.$sys.getSystemInfo({ h5: true }).then(data => {
			this.$sys.getBoundingClientRect('.tabs').then(e => {
				this.modelHeight = data.screenHeight - e.height - 100;
			});
		});
		let type = uni.getStorageSync('navType') || 'index';
		this.setType("curriculum");
	},
	methods: {
		setType(e, name) {
			if (e == 'index') {
				this.$sys.setNavigationBarTitle('首页');
			}
			if (e == 'curriculum') {
				this.$sys.setNavigationBarTitle('约课');
			}
			if (e == 'list') {
				this.$sys.setNavigationBarTitle('已约');
				let setTime=setInterval(()=>{
					if(	this.$refs.list && this.$refs.list.setHeight){
						this.$refs.list.setHeight(this.modelHeight);
						clearInterval(setTime);
					}	
				},50);
			}
			if (e == 'personal') {
				this.$sys.setNavigationBarTitle('我的');
			}
			
			this.type = e;
			uni.setStorageSync('navType', e);
		}
	}
};
</script>

<style lang="scss">
#content_div{ 
	bottom: var(--window-bottom) ;	
}
.tabs {
	position: fixed;
	width: 100%;
	height: 100rpx;
	z-index: 3;
	left: 0rpx;
	bottom: 0px;
	background-color: $bg-color-white;
	@extend .flex-space-between-center;
	padding: 5rpx 0px;
	border-top: 1rpx solid #e8e8e8;
	.item {
		width: 25%;
		text-align: center;
		image {
			width: 44rpx;
			margin: auto;
		}
		.text {
			margin-top: 8rpx;
			color: $text-color-nine;
			font-size: $font-size-sm;
		}
		.yes {
			display: none;
		}
	}
	.active {
		.yes {
			display: block;
		}
		.default {
			display: none;
		}
		.text {
			color: $text-color-three;
		}
	}
}
</style>
